<template>
  <!--  不带边框的样式  -->
  <el-form
    ref="form"
    :model="formData"
    :label-width="labelWidth + 'px'"
    :label-position="labelPosition"
    size="mini"
    @submit.native.prevent
  >
    <el-row>
      <el-col
        v-for="(item, index) in detailsList"
        :key="index"
        :span="item.span ? item.span : 24"
      >
        <el-form-item v-if="item.type == 'slot'" :label="item.label">
          <slot :name="item.field" />
        </el-form-item>
        <el-form-item v-else :label="item.label">{{
          formData[item.field] || "--"
        }}</el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
export default {
  props: {
    labelWidth: {
      type: String,
      default() {
        return '100'
      }
    },
    detailsList: {
      type: Array,
      default() {
        return []
      }
    },
    formData: {
      type: Object,
      default() {
        return {}
      }
    },
    labelPosition: {
      type: String,
      default() {
        return 'left'
      }
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style scoped>
::v-deep .el-form-item--mini.el-form-item {
  margin-bottom: 0 !important;
}
::v-deep .el-form-item {
  padding: 10px 0;
}
::v-deep .el-form-item__label {
  font-weight: normal !important;
}
</style>
